<template>
    <v-menu location="bottom">
        <template v-slot:activator="{ props: itemProps }">
            <v-btn v-bind="itemProps"
                class="!pl-[10px] !pr-2 !h-[32px] !min-w-[auto] box-light-shadow rounded-[5px] border">
                <div class="flex">
                    <div class="mr-[6px] text-[14px] font-[700] text-text--primary normal-case">{{ valueTitle }}</div>
                    <svg-icon iconClass="menu-down-grey" size="20"></svg-icon>
                </div>
            </v-btn>
        </template>

        <v-list color="primary">
            <v-list-item v-for="item in items" :key="item.value" :value="item.value" color="primary" @click="handleClick(item)">
                <v-list-item-title>
                    <div class="text-[14px]">{{ item.title }}</div>
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
const props = defineProps({
    items: {
        type: Array<any>
    }
})
const value = defineModel();
const valueTitle = computed(() => {
    if (value.value && props.items && props.items.length) {
        let obj = props.items.filter((item) => {
            return item.value == value.value;
        })
        if (obj && obj.length) {
            return obj[0].title;
        }
    }
    return "";
});
function handleClick(item: any) {
    value.value = item.value;
}
</script>

<style scoped></style>